<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" href="/css/index.css"/>
	<link rel="stylesheet" href="/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="/layui/css/layui.css"  media="all">
	<script src="/js/main.js"></script>
	<title th:text="${setting.siteName}+'-已购图书'">易书网</title>
</head>
<style>
	.help-main p {
		line-height: 50px;
	}
</style>
<body >

<!--引入   头部片段 -->
<div  th:replace="mall/common/mall_common :: header"></div>


<div class="help-wrap">
	<div class="container clearfix">
		<div class="bread">当前位置：
			<a href="/mall/index.html">首页</a> >
			<a href="/mall/member.html">个人中心</a> >
			<a href="/mall/bought.html">已买书籍</a>
		</div>
		<div  th:replace="mall/common/mall_common :: left"></div>
		<div class="help-r fr">
			<div class="help-item-title">已买书籍</div>
			<div class="help-main">
				<div class="product-item clearfix">
					<div class="name fl">
						<span style="margin-left: 150px">书名</span>
					</div>
					<div class="attr fr">
						<ul class="clearfix">
							<li>价格</li>
							<li>买入时间</li>
							<li style="width: 110px">状态</li>
						</ul>
					</div>
				</div>

				<div class="pro" id="books" th:fragment="data" th:each="books:${booksList}">
					<div class="product-attr">
						<div class="product-name fl">
							<div class="pic-thumb fl"><a href="javascripet:;"  ><img class="middle" src="images/book.jpg" th:src="${books.imageUrl}"></a></div>
							<div class="product-title fl">
								<a href="javascripet:;" class="ellipsis" th:text="${books.bookName}">福尔摩斯探案全集</a><br>
								<span th:each="pac:${books.Pac}" th:text="${pac.childName}">传播学院</span>
							</div>
						</div>
						<div class="product-price fr">
							<ul class="clearfix">
								<li th:if="${books.isdiscount==2}"><s th:text="'¥'+${books.price}">¥25</s>¥[[${books.discount}]]</li>
								<li th:if="${books.isdiscount==1}" th:text="'¥'+${books.price}">¥150.00</li>
								<li th:text="${#dates.format(books.createTime, 'yyyy-MM-dd')}">2014-01-06</li>
								<li class="edit" style="width: 110px">
									<span th:if="${books.state==3}" class="sell">交易完成...</span>
									<span th:if="${books.state==2}" th:onclick="'javascript:cancel('+${books.id}+')'" class="sell">取消交易...</span>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="pro">
					<div class="product-attr">
						<div class="product-name fl">
							<div class="pic-thumb fl"><a href="detail.html"  ><img class="middle" src="/images/book.jpg"></a></div>
							<div class="product-title fl">
								<a href="detail.html" class="ellipsis">福尔摩斯探案全集</a><br>
								<span>传播学院</span>
								<span>广告学</span>
								<span>大三</span>
							</div>
						</div>
						<div class="product-price fr">
							<ul class="clearfix">
								<li>¥150.00</li>
								<li>2014-01-06</li>
								<li class="edit" style="width: 110px">
									<span class="sell">交易完成</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="demo1" style="text-align: center"></div>

			</div>
		</div>
	</div>
</div>




<!--引入 尾部片段-->
<div  th:replace="mall/common/mall_common :: footer"></div>


<script src="/js/jquery-3.4.1.js"></script>
<script src="/layui/layui.js" ></script>
<script >
	$("#dataList").click(function () {
		var data = $("#bookName").val();
		console.log(data)
		location.href="/mall/list.html?bookName="+data;
		return false;
	})
	var layer =null
	layui.use(['laypage', 'layer'], function() {
		var laypage = layui.laypage
		layer = layui.layer;

		//总页数大于页码总数
		var total =5;

		$.get("/books/user/booksListCount/purchaser",{},function (res) {
			console.log(res.data)
			total = res.data;
			laypage.render({
				elem: 'demo1'
				,limit:5
				,count:  total //数据总数
				,first: '首页'
				,last: '尾页'
				,jump: function(obj){
					booksPage(obj.curr,obj.limit)
				}
			});
		},"json")


	})
	function booksPage(page,limit) {
		$.get("/books/user/booksList/purchaser",{page:page,limit:limit},function (data) {
			$(".pro").html(data);
		});
	}

	function cancel(id) {
		var index= layer.confirm('确定要取消交易吗？', {
			btn: ['确定','取消'] //按钮
		}, function(){
			$.get("/books/editBookState",{"id":id,"state":1},function (res) {
				booksPage(1,5);
				layer.close(index)
				if (res.success){
					layer.msg("取消成功")
				}else{
					layer.msg("取消失败")
				}
			},"json")
		}, function(){
			layer.close(index)
		});
	}

</script>

</body>
</html>